<template>
  <div class="pull-chheight wel-contailer">
    <div class="index_bg">
      <ul class="mainmenu">
        <li v-for="(child,cindex) in welcomes" v-bind:welIndex="child.sort" v-bind:draggable="true" v-on:drop='drop($event)'
          v-on:dragover='allowDrop($event)' v-on:dragstart="dragstart($event,child)">
          <i class="el-icon-close expressClose" v-on:click="closeExpress"></i>
          <a href="#" v-on:click="openTag(child)" v-bind:index="cindex" v-bind:key="cindex">
            <b class="default">
              <i v-bind:class="child.icon" style="margin:0px 10px 0px 0px;"></i>{{ child.label }}
            </b>
          </a>
        </li>
        <li v-on:drop='drop($event)' v-on:dragover='allowDrop($event)'>
          <a href="#">
            <b class="default">
              <i class="el-icon-plus" style="margin:0px 10px 0px 0px;vertical-align:middle;margin-top:18px;font-size:30px;"
               ></i>
            </b>
          </a>
        </li>
      </ul>
    </div>
     <iframe class="iframe-flowdata" id="data_Iframe" :src="url"></iframe>
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import {
    resolveUrlPath,
    dragElement
  } from "@/util/util";
  import {
    fetchWelcome,
    addObj,
    putObj,
    delObj
  } from "@/api/admin/welcome";

  export default {
    name: "wel",
    data() {
      return {
        // token: this.$store.getters.access_token,
        welcomes: [],
        dragDom: null,
        url:'/scabpm/agilebpm-ui/bpm/definition/bpmData.html'
      };
    },
    computed: {
      ...mapGetters(["website", "userInfo",'permissions']),
    },
    mounted(){
   /*   setTimeout(() => {
        var frame = document.getElementById('data_Iframe');
        var str=JSON.stringify(this.permissions);
        frame.contentWindow.postMessage({token:this.token,perms:str}, '*');
      },3500); */
    },
    created() {
      this.getList();
    },
    methods: {
      dragstart(e, child) {
        this.dragDom = child;
      },
      getList() {
        fetchWelcome(this.userInfo.id).then(response => {
          this.welcomes = response.data.data
        })
      },
      closeExpress(e) {
        var delWelcome = $(e.target.parentNode).find("a")[0].innerText;
        for (var i = 0; i < this.welcomes.length; i++) {
          if (this.welcomes[i].label.trim() == delWelcome.trim()) {
            delObj(this.welcomes[i].welId).then(resp => {
              if (resp.data.data) {
                this.getList();
              } else {
                this.$message('删除失败！');
              }
            });
            return;
          }
        }
      },
      drop(e) {
        var addWelcome = dragElement.targetMenu;
        var obj = {};
        if (addWelcome != null) {
          obj.userId = this.userInfo.id;
          obj.icon = addWelcome.icon;
          obj.label = addWelcome.label;
          obj.path = addWelcome.path;
          obj.sort = this.getMaxSortNumber();
        }

        if (dragElement.targetMenu != null) {
          for (var i = 0; i < this.welcomes.length; i++) {
            if (obj.label == this.welcomes[i].label) {
              this.$message('请勿重复添加！');
              return;
            }
          }
        }
        if ($(e.target)[0].innerText == "") {
          if (this.dragDom != null) {
            this.dragDom = null;
            return;
          }
          addObj(obj).then(resp => {
            if (resp.data.data) {
              // this.welcomes.push(obj);
              this.getList();
            } else {
              this.$message('添加失败！');
            }
            dragElement.targetMenu = null;
          });
        } else {
          if (this.dragDom != null) { //页面拖动
            //得到 多动元素的 wel_id
            var wel_id = this.dragDom.welId;
            var parentSort = $(e.currentTarget).attr("welIndex")
            putObj(wel_id, parentSort).then(resp => {
              if (resp.data.data) {
                this.getList();
              } else {
                this.$message('更新失败！');
              }
            });
            this.dragDom = null;
          } else { //menu拖动添加
            var targetSort = $(e.currentTarget).attr("welIndex");
            //添加此条数据
            addObj(obj).then(resp => {
              if (resp.data.data ) {
                //再更新
                putObj(obj.welId, targetSort).then(resp => {
                  if (resp.data.data ) {
                    this.getList();
                  } else {
                    this.$message('更新失败！');
                  }
                });
              } else {
                this.$message('添加失败！');
              }
              dragElement.targetMenu = null;
            });
          }
        }
      },
      getMaxSortNumber() {
        var maxNum = 0;
        for (var i = 0; i < this.welcomes.length; i++) {
          if (this.welcomes[i].sort > maxNum) {
            maxNum = this.welcomes[i].sort;
          }
        }
        return Number(maxNum) + 1;
      },
      allowDrop(e) {
        e.preventDefault();
      },
      openTag(item) {
        this.$router.push({
          path: resolveUrlPath(item.path, item.label)
        });
      },

    }
  };
</script>
<style src="./wel.css"></style>
<style lang="scss" >
  .iframe-flowdata {
    display: none;
  }
</style>
